
    // 二、数据驱动 ，数据优先。
    // 组装数据 ，然后根据数据在显示视图；

    // 对象数组
    // var arr = [{
    //     username:"张三",
    //     age:20,
    //     gender:"男"
    // },{
    //     username:"李四",
    //     age:23,
    //     gender:"男"
    // },{
    //     username:"王五",
    //     age:19,
    //     gender:"女"
    // }]; // 可以描述学员的信息；
    var arr = [];
    var tbodyEle = document.querySelector("tbody");
    // 定义一个方法 ： 根据数据 渲染视图 。 根据数据显示对应的视图
    function renderDom(arr){
        // 每次添加之前 把之前的内容清空掉 
        tbodyEle.innerHTML = "";
        arr.forEach(function(item){
            var trEle = document.createElement("tr");
            trEle.innerHTML = "<td>"+item.username+"</td><td>"+item.age+"</td><td>"+item.gender+"</td><td class='del'>删除</td>";
            tbodyEle.appendChild(trEle);
        })

         // 获取删除按钮 绑定删除事件 ；
         var delEles = document.querySelectorAll(".del");
        // console.log(delEles);
        delEles.forEach(function(delEle,key){
            delEle.onclick = function(){
                // 1.删除数据里的内容 ,arr 
                arr.splice(key,1);
                // console.log(arr);
                renderDom(arr);
            }
        })
    }

    // renderDom(arr);
    // renderDom(arr);



    // 添加学员 
    var usernameELe =  document.querySelector("#username");
    var ageEle = document.querySelector("#age");
    var genderEle = document.querySelector("#gender");
    
    document.querySelector("#addBtn").onclick = function(){
        var username = usernameELe.value;
        var age = ageEle.value;
        var gender = genderEle.value;
        // 添加的时候 组装一个对象数组出来
        arr.push({
            username:username,
            age:age,
            gender:gender
        })
        console.log(arr);
        renderDom(arr);
         // 获取删除按钮 绑定删除事件 ；
        //  var delEles = document.querySelectorAll(".del");
        // // console.log(delEles);
        // delEles.forEach(function(delEle,key){
        //     delEle.onclick = function(){
        //         // 1.删除数据里的内容 ,arr 
        //         arr.splice(key,1);
        //         // console.log(arr);
        //         renderDom(arr);
        //     }
        // })
    }



    // 排序操作 

    var sortBtn = document.querySelector("#sortBtn");
    sortBtn.onclick = function(){
        // 1.排序数据 2. 渲染视图 
        arr.sort(function(a,b){
            return a.age-b.age;
        });
        // console.log(arr);
        renderDom(arr);
    }